<template>
	<view class="u-page">
		<view class="content">
			<view class="list-item" v-for="(item,index) in list " :key="index">
				<view class="user">
					<view class="headpic"><image :src="item.slUserByUuid.avatarUrl" mode=""></image></view>
					<view class="nickname ellipsis-sample">{{item.slUserByUuid.nickname}}</view>
				</view>
				<view class="textcont">
					<view class="info">{{item.content}}</view>
					<view class="imags" v-if="item.files">
						<uni-grid :column="3" :showBorder="false"  :square="true">
						    <uni-grid-item  v-for="(file,index1) in item.files" :key="index1">
						      <image :src="file" mode=widthFix></image>
						    </uni-grid-item>
						</uni-grid>
					</view>
					<view class="time">
						<view class="times">
							<text>{{item.createTime}}</text>
							
						</view>
						<view class="comment1" @click="comment(item)">
							<image src="../../../static/icon/comment.png" mode="widthFix"></image>
							<text>{{item.slProjectDynamicCommentsByDid.totalCount}}</text>
						</view>
						<view class="fabulous" @click="fabulous(item)" v-if="uid != item.slProjectDynamicFabulousByDid.nodes[0].uid">
							<image src="../../../static/icon/fabulous.png" mode="widthFix"></image>
							<text>{{item.slProjectDynamicFabulousByDid.totalCount}}</text>
						</view>
						<view class="fabulous" v-else>
							<image src="../../../static/icon/fabuloushover.png" mode="widthFix"></image>
							<text>{{item.slProjectDynamicFabulousByDid.totalCount}}</text>
						</view>
						
					</view>
				</view>
				<view class="comment" v-if="item.slProjectDynamicCommentsByDid.nodes.length > 0">
					<view class="lists" v-for="(com,k) in item.slProjectDynamicCommentsByDid.nodes" :key="k">
						<text class="nick">{{com.slUserByUid.nickname}}</text>：<text class="message">{{com.content}}!</text>
					</view>
				</view>
			</view>
			<view>
			        <uni-fab
			            :pattern="pattern"
									class="fab-bg"
			            :content="content"
			            horizontal="right"
			            vertical="bottom"
			            :direction="direction"
			            @trigger="trigger"
						@fabClick="postDynamic"
			        ></uni-fab>
			    </view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:'',
				list:[],
				uid:"",
				pattern:{
					"color":"#ffffff",
					// "backgroundColor":"#C7171E",
					buttonColor:"#C7171E"
				}
			}
		},
		onLoad(e) {
			let uid = uni.getStorageSync('userData').uid
			this.uid = uid
			console.log(e)
			this.pid = e.id
			this.dynamic()
		},
		methods: {
			//获取动态信息
			async dynamic(){
				const data = await this.GQL({
					"operationName": "allSlProjectDynamics",
					"query": "query allSlProjectDynamics($filter: SlProjectDynamicFilter, $orderBy: [SlProjectDynamicsOrderBy!] = [PRIMARY_KEY_ASC], $filter1: SlProjectDynamicCommentFilter) { allSlProjectDynamics(filter: $filter, orderBy: $orderBy) { nodes { pid id files content createTime toId uuid slUserByUuid { nickname avatarUrl } slProjectDynamicCommentsByDid(filter: $filter1) { totalCount nodes { content id slUserByUid { nickname } } } slProjectDynamicFabulousByDid { totalCount nodes { uid } } } totalCount } }",
					"variables": {"filter": {"pid": {"equalTo": this.pid}},"orderBy": "CREATE_TIME_DESC","filter1":{"type":{'equalTo':"2"}}}
				})
				if(data.data){
					data.data.allSlProjectDynamics.nodes.forEach(function (item, index) {
						item.files = JSON.parse(item.files);
					});
				}
				
				this.list = data.data.allSlProjectDynamics.nodes
				
			},
			//点赞
			async fabulous(row){
				// console.log('1111',row);
				let uid = uni.getStorageSync('userData').uid
				const data = await this.GQL({
					"operationName": "createSlProjectDynamicFabulous",
					"query": "mutation createSlProjectDynamicFabulous($input: CreateSlProjectDynamicFabulousInput!) { createSlProjectDynamicFabulous(input: $input) { slProjectDynamicFabulous { id } } }",
					"variables": { "input": { "slProjectDynamicFabulous": { "did":row.id,"uid":uid } } }
				})
				if(data.data.createSlProjectDynamicFabulous.slProjectDynamicFabulous){
					this.dynamic()
				}else{
					uni.showToast({ title: '点赞失败', icon: 'error', duration: 3000 });
				}
			},
			comment(row){
				uni.navigateTo({
					url:"/pages/project/dynamic/comment?pid="+this.pid+'&did='+row.id
				})
			},
			
			postDynamic(){
				uni.navigateTo({
					url:"/pages/project/dynamic/dynamic?pid="+this.pid
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-page{
		background-color: #FBFCFE;
		min-height: 100vh;
	}
	.content{
		margin: 0 30rpx;
		padding: 32rpx 0;
	}
	.user{
		height: 40px;
		padding: 20rpx 0;
		.headpic{
			position: absolute;
			image{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}
		}
		.nickname{
			position: relative;
			margin-left: 35px;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #161E3E;
			line-height: 30px;
		}
	}
	.textcont{
		.info{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #767B8D;
			line-height: 44rpx;
			margin-bottom: 24rpx;
		}
		.imags
			{.uni-grid-item,image{
				width: 220rpx!important;
				height: 220rpx!important;
				margin-right: 8rpx;
				margin-bottom: 8rpx;
				display: inline-block;
			}
		}
		.time{
			height: 30px;
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9BA7C1;
			.times{
				 position: absolute;
				width: 100px;
				overflow: hidden;
				height: 30px;
				 line-height: 30px;
			}
			.comment1{
				    position: absolute;
				    right: 100px;
				    line-height: 31px;
			}
			.fabulous{
				position: absolute;
				right: 30px;
				line-height: 31px;
			}
			image{
				width: 20px;
				height: 20px;
				margin-right: 5px;
				vertical-align: text-bottom;
			}
		}
	
	}
	.comment{
		background-color: #F4F4F4;
		padding: 10rpx 18rpx;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 16px;
		.lists{
			// margin-top: 5px;
			// margin:10px;
			line-height: 1.8;
			display: flex;
		}
		.nick{
			color: #C7171E;
			word-break: keep-all;
		}
		.message{
			color: #161E3E;
			// line-height: 1.5;
		}
	}
</style>
